<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>响应式列表框</title>
    <style>
        body {
  margin: 0;
  padding: 0;
  background-color: #f2f2f2;
  font-family: Arial, sans-serif;
}

.list-container {
  width: 80%;
  margin: 50px auto;
  background-color: #fff;
  border-radius: 5px;
  padding: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

h1 {
  text-align: center;
  margin-top: 0;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: scroll;
  max-height: 200px;
}

li {
  padding: 10px;
  border-bottom: 1px solid #ccc;
}

@media screen and (max-width: 768px) {
  .list-container {
    width: 90%;
  }
}

    </style>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="list-container">
      <h1>列表框</h1>
      <ul>
        <li>列表项1</li>
        <li>列表项2</li>
        <li>列表项3</li>
        <li>列表项4</li>
        <li>列表项5</li>
        <li>列表项6</li>
        <li>列表项7</li>
        <li>列表项8</li>
        <li>列表项9</li>
        <li>列表项10</li>
        <li>列表项11</li>
        <li>列表项12</li>
        <li>列表项13</li>
        <li>列表项14</li>
        <li>列表项15</li>
        <li>列表项16</li>
        <li>列表项17</li>
        <li>列表项18</li>
        <li>列表项19</li>
        <li>列表项20</li>
      </ul>
    </div>
  </body>
</html>
